<template>
	<view class="phone-modal-mask" v-if="show">
		<view class="phone-modal-content">
			<view class="phone-modal-header">
				快手登录
			</view>
			<view class="phone-modal-desc">
				授权您的手机号，用于小鲸洗账号登录。
			</view>
			<view class="phone-modal-footer">
				<view class="phone-modal-cancel phone-modal-item" @click="show = false">
					取消
				</view>
				<view class="" style="background-color: #e9e9e9; height: 60rpx; width: 1rpx;">

				</view>
				<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"
					class="phone-modal-confirm phone-modal-item">
					同意授权
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				callback: () => {},
				show: false
			}
		},
		methods: {
			openModal(val) {
				this.callback = val ? val.callback : () => {}
				this.show = true
			},
			getPhoneNumber(data) {
				console.log(data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.phone-modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(40, 40, 40, 0.7);
		box-sizing: border-box;
		overflow: hidden;
	}

	.phone-modal-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80vw;
		height: 300rpx;
		background-color: #fff;
		border-radius: 34rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.phone-modal-header {
		font-size: 40rpx;
		text-align: center;
		padding: 20rpx;
		font-weight: 900;
	}

	.phone-modal-desc {
		padding: 0 30rpx 30rpx;
		font-size: 30rpx;

	}

	.phone-modal-footer {
		display: flex;
		justify-content: space-between;
		border-top: solid 1rpx #e9e9e9;
		align-items: center;
	}

	.phone-modal-item {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.phone-modal-confirm {
		color: #FFCA30;
		background-color: #fff;
		border-bottom-right-radius: 34rpx;
		border: none;
		box-shadow: none;
	}
</style>